<template>
  <div class="sidebar">
    <!-- 侧边栏登录模块 -->
    <div class="n-myinfo n-myinfo-1 s-bg s-bg-1">
      <!-- 登陆前显示的模块 -->
      <div v-if=" !$store.state.userId ? true : false">
        <p class="note s-fc3">
          登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
        </p>
        <a id="index-enter-default" href="javascript:;" class="btn s-bg s-bg-2 f-tdn" @click="login">
          用户登录
        </a>
      </div>
      <!-- 登陆后显示的模块 -->
      <div v-if=" $store.state.userId ? true : false">
        <div class="f-cb">
          <a href="/my" class="head f-pr">
            <img :src="$store.state.profile" />
          </a>
          <div class="info">
            <h4 style="overflow: hidden">
              <a href="javascript:;" class="nm nm-icn f-fs1 f-ib f-thide">{{
                $store.state.nickName
              }}</a>
            </h4>
            <p>
              <a href="javascript:;" class="u-lv u-icn2 u-icn2-lv">
                {{ level }}
                <i class="right u-icn2 u-icn2-lvright"></i>
              </a>
            </p>
            <div class="btnwrap f-pr">
              <a href="javascript:;" class="u-btn2-dis" @click="flag && a()">
                <i :class="{ font_color: !flag }">{{ status }}</i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 入住歌手 -->
    <div class="n-singer">
      <h3 class="v-hd3">
        <span class="f-fl">入驻歌手</span>
        <a href="Javascript:;" class="more s-fc3">查看全部 &gt;</a>
      </h3>
      <ul class="n-enter" id="singer-list">
        <li v-for="(item, index) in artists" :key="index">
          <a href="javascript:;" class="itm f-tdn">
            <div class="head">
              <img class="j-img" :src="item.BGurl" />
            </div>
            <div class="ifo">
              <h4>
                <span class="nm f-fs1 f-ib f-thide">{{ item.artist }}</span>
              </h4>
              <p class="f-thide s-fc3">{{ item.address }}</p>
            </div>
          </a>
        </li>
      </ul>
      <div>
        <a hidefocus="true" class="u-btn2 u-btn2-1">
          <i>申请成为网易音乐人</i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import {LoginStatus} from "../../../network/login"
import {mySignin} from "../../../network/login"
import {VIP} from "../../../network/login"
import {formatMonth} from '../../../components/tool/tool'
export default {
 data() {
   return {
     artists:[
      {artist:"张惠妹aMEI",BGurl:"http://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62",address:"台湾歌手张惠妹"},
      {artist:"Fine乐团",BGurl:"http://p2.music.126.net/7BUW9dnqOMF1dn3ioKJOMg==/109951162820707114.jpg?param=62y62",address:"独立音乐人"},
      {artist:"萬曉利",BGurl:"http://p2.music.126.net/TiRAIiIihOgtBgYB6DZRXA==/109951162916034289.jpg?param=62y62",address:"民谣歌手、中国现代民谣的代表人物之一"},
      {artist:"音乐人赵雷",BGurl:"http://p2.music.126.net/w_UWOls2uCkFN_U62788Xg==/18806046882229308.jpg?param=62y62",address:"民谣歌手"}
     ],
     status:"签到",
     flag:true,
     level:""
   }
 },
 methods:{
   a(){
     mySignin( 1 ).then(res => {
        if (res.code === 200) {
          this. status = "已签到"
        }
     })
    this.flag = false
   },
   login(e){
        this.$login.show(e.pageY - 200);
   },
   vip(){
     if (this.$store.state.token) {
        VIP().then(res => {
          this.level = res.data.data.level
        },err => {
          console.log(err)
        })
     }
   },
   },
 mounted(){
   this.vip()
 }
} 
</script>

<style scoped>
.sidebar {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  width: 250px;
  min-height: 100px;
}

.n-myinfo-1 {
  height: 126px;
  padding-top: 0;
}
.s-bg {
  background: url("../../../assets/imgs/index.png") no-repeat 0 9999px;
}
.s-bg-1 {
  background-position: 0 0;
}
p {
  margin: 0;
  padding: 0;
}
ul {
  display: block;
}
.n-myinfo .note {
  width: 205px;
  margin: 0 auto;
  padding: 16px 0;
  line-height: 22px;
}
.s-fc3 {
  color: #666;
}
.n-myinfo .btn {
  margin: 0 auto;
  display: block;
  width: 100px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 0 #8a060b;
}
.s-bg-2 {
  background-position: 0 -195px;
}
.s-bg-2:hover {
  background-position: -110px -195px;
}
.n-singer {
  margin-top: 15px;
  width: 100%;
  min-height: 200px;
}
.v-hd3 {
  position: relative;
  height: 23px;
  margin: 0 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
}
.f-fl {
  float: left;
}
.v-hd3 .more {
  float: right;
  font-weight: normal;
  color: #666;
}
.n-enter {
  margin: 6px 0 14px 20px;
  min-height: 200px;
}
.n-enter li {
  margin-top: 14px;
  overflow: auto;
  padding: 1px;
}
.n-enter .itm {
  width: 210px;
  height: 62px;
  background: #fafafa;
}
.f-tdn {
  text-decoration: none;
}
a {
  cursor: pointer;
}
.n-enter .head {
  float: left;
  width: 62px;
  height: 62px;
}
enter .head img {
  float: left;
  width: 62px;
  height: 62px;
}
.n-enter .ifo {
  float: left;
  width: 133px;
  height: 60px;
  padding-left: 14px;
  border: 1px solid #e9e9e9;
  border-left: none;
}
.n-enter .nm {
  width: 90%;
}
.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.f-fs1 {
  font-size: 14px;
}
.n-enter p {
  width: 90%;
  margin-top: 8px;
}
.n-enter h4 {
  margin-top: 8px;
}
.n-singer .u-btn2 {
  text-align: center;
  line-height: 31px;
  display: inline-block;
  height: 31px;
  margin-left: 20px;
  border-radius: 4px;
  text-decoration: none;
  padding: 0 5px 0 0;
  white-space: nowrap;
  background: url("../../../assets/imgs/button2.png") no-repeat;
  background-position: right -100px;
}
.u-btn2-1 {
  color: #333;
}
.n-singer .u-btn2 i {
  display: inline-block;
  width: 170px;
  font-weight: bold;
  overflow: hidden;
  background: url("../../../assets/imgs/button2.png") no-repeat;
  background-position: 0 -59px;
  padding: 0 15px 0 20px;
  color: #333;
  font-style: normal;
}
/* 登陆后模块样式 */
.f-cb {
  margin-top: 15px;
}
.n-myinfo .head {
  float: left;
  width: 80px;
  height: 80px;
  margin-left: 20px;
  _margin-left: 10px;
  padding: 2px;
  background: #fff;
  border: 1px solid #dadada;
}
.f-pr {
  position: relative;
  zoom: 1;
}
.n-myinfo .head img {
  display: block;
  width: 80px;
  height: 80px;
}
.n-myinfo .info {
  float: left;
  width: 112px;
  margin-left: 18px;
  padding-top: 5px;
}
h4 {
  font-size: 100%;
  padding: 0px;
  margin: 0px;
  display: block;
}
.n-myinfo .nm-icn {
  width: auto;
  max-width: 100%;
  vertical-align: middle;
}
.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.f-fs1 {
  font-size: 14px;
}
.n-myinfo .info p {
  width: 100%;
  margin-top: 5px;
  padding: 0;
  margin: 0;
}
.u-lv {
  display: inline-block;
  height: 17px;
  overflow: hidden;
  padding-left: 25px;
  line-height: 18px;
  color: #999;
  font-weight: bold;
  font-style: italic;
}
.u-icn2 {
  background: url("../../../assets/imgs/icon2.png") no-repeat 0 9999px;
  background-position: -130px -64px;
  vertical-align: middle;
}
.u-lv i {
  float: right;
}
.u-icn2-lvright {
  width: 8px;
  height: 17px;
  background: url("../../../assets/imgs/icon2.png") no-repeat 0 9999px;
  background-position: -192px -64px;
}
.u-icn2 {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.n-myinfo .info .btnwrap {
  margin-top: 15px;
}
.f-pr {
  position: relative;
  zoom: 1;
}
.u-btn2-dis {
  padding: 0 5px 0 0;
  background: url("../../../assets/imgs/button.png");
  background-position: right -344px; /* 已签到样式*/
  text-decoration: none;
  cursor: default;
  display: inline-block;
  height: 31px;
  overflow: hidden;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
}
.u-btn2-dis i {
  padding: 0 15px 0 20px;
  display: inline-block;
  height: 31px;
  line-height: 31px;
  overflow: hidden;
  vertical-align: top;
  text-align: center;
  font-style: normal;
}
.font_color {
  color: #999;
}
</style>